<template>
  <div class="employees-container">
    <div class="app-container">
      <el-card>
        <!-- 放置表单 -->
        <el-form ref="userForm" label-width="120px" :model="userInfo" :rules="rules" style="margin-left: 120px; margin-top:30px">
          <el-form-item label="姓名:" prop="username">
            <el-input v-model="userInfo.username" style="width:300px" />
          </el-form-item>

          <el-form-item label="手机">
            <el-input v-model="userInfo.mobile" disabled style="width:300px" />
          </el-form-item>

          <el-form-item label="入职时间">
            <el-date-picker
              v-model="userInfo.timeOfEntry"
              type="date"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>

          <el-form-item label="员工头像">
            <!-- <upload-img v-model="userInfo.staffPhoto" /> -->
            <!-- <upload-img ref="uploadImg" /> -->
            <!--
              图片上传组件
              核心作用:上传之后得到的新图片 作为用户的新头像来使用 需要提交给更新接口
              问题:提交接口发生在父组件 新的图片url子组件中
              1 props + $emit
              2 ref 子组件实例对象
                可以随便的调用 子组件中的方法
                可以随便的获取子组件中的响应式属性并且可以进行属性操作

              方案1
                ref 缺点
                  1 必须知道子组件中的属性名才能获取到
                  2 操作起来以命令是的方式很繁琐

              方案2
                v-model 通过prop的双向绑定 简化数据的获取和赋值
                组件身上写了v-model
                1 通过v-bind绑定了一个名称为value的属性 props:{value}
                2 绑定了一个名称为input的事件($emit('input',上传之后的新的图片的url))
                3 在绑定的事件回调函数中 自动把触发自定义事件时传出来的参数赋值给通过v-model绑定的数据

                双向绑定： M-V数据变化视图跟着改变 视图变化数据跟着变化
             -->
            <upload-img v-model="userInfo.staffPhoto" />
          </el-form-item>

          <!-- 保存个人信息 -->
          <el-row class="inline-info" type="flex" justify="center">
            <el-col :span="12">
              <el-button type="primary" @click="confirm">保存更新</el-button>
              <el-button @click="$router.back()">返回</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getUserDetailById, saveUserDetailById } from '@/api/user'
export default {
  name: 'Detail',
  data() {
    return {
      userInfo: {},
      rules: {}
    }
  },
  mounted() {
    this.hGetDetail()
  },
  methods: {
    async hGetDetail() {
      const res = await getUserDetailById(this.$route.query.id)
      this.userInfo = res.data
      // 把返回的图片url显示到子组件的里面
      // this.$refs.uploadImg.imageUrl = this.userInfo.staffPhoto
    },
    async confirm() {
      // 更新处理
      await saveUserDetailById(this.userInfo)
      // 拿到子组件中的新的图片url
      // console.log(this.$refs.uploadImg.imageUrl)
      // await saveUserDetailById({ ...this.userInfo, ...{ staffPhoto: this.$refs.uploadImg.imageUrl }})
      await saveUserDetailById(this.userInfo)
      this.$message({
        type: 'success',
        message: '更新信息成功'
      })
      this.$router.back()
    }
  }
}
</script>
